<script setup lang="ts">
const {
  title = '',
  header = true,
  side = true,
  sideTitle = '目录',
  sideWidthAdjustable = true,
  sideRight = false,
  sideRightWidthAdjustable = true,
  contentGrid = true
} = defineProps<{
  title?: string
  header?: boolean
  side?: boolean
  sideTitle?: string
  sideWidthAdjustable?: boolean
  sideRight?: boolean
  sideRightWidthAdjustable?: boolean
  contentGrid?: boolean
}>()

const sideRightShow = defineModel<boolean>('sideRightShow', { default: false })

const sideWidth = ref(252)

const isSideDrawer = ref(false)
const isDrawerShow = ref(false)
const sideDrawerIconProps = computed(() =>
  isDrawerShow.value
    ? IconPropsConst.LayoutSidebarLeftCollapse
    : IconPropsConst.LayoutSidebarLeftExpand
)
const handleWidthUpdate = (width: number) => {
  isSideDrawer.value = width <= 568
}

const isActionsCollapse = ref(false)

const sideRightWidth = ref(252)
</script>

<template>
  <s-watch-size class="w-full h-full" :width-update-handler="handleWidthUpdate">
    <x-layout
      :has-header="header"
      header-full-width
      :has-side="side && !isSideDrawer"
      :side-props="{
        width: `${sideWidth}px`,
        collapseSpeed: 0,
        watchSizeProps: {
          disabled: true
        },
        showTrigger: false
      }"
    >
      <template #header>
        <el-scrollbar>
          <div class="px-2 py-1 flex justify-between items-center gap-0">
            <div class="flex items-center">
              <page-title>
                <slot name="title">
                  {{ title }}
                </slot>
              </page-title>
              <s-icon
                v-show="isSideDrawer"
                class="flex-shrink-0 p-2 pl-0 cursor-pointer"
                :icon-props="sideDrawerIconProps"
                @click="isDrawerShow = !isDrawerShow"
              />
            </div>
            <s-contact
              :contact="[() => (isActionsCollapse = true)]"
              :restore="[() => (isActionsCollapse = false)]"
            >
              <slot name="actions" :collapse="isActionsCollapse" />
            </s-contact>
          </div>
        </el-scrollbar>
      </template>
      <template #side>
        <s-adjustable-container
          :width-adjustable="sideWidthAdjustable"
          :width-min="150"
          @update:width="(width) => (sideWidth = width)"
          height-follow-parent
        >
          <slot name="side" />
        </s-adjustable-container>
      </template>
      <template #content>
        <el-container class="w-full h-full overflow-hidden">
          <el-main class="!p-0">
            <div class="box-border w-full h-full flex flex-col items-stretch">
              <div>
                <el-scrollbar>
                  <div class="min-w-[20rem]">
                    <slot name="content-top" />
                  </div>
                </el-scrollbar>
              </div>
              <el-scrollbar class="flex-1" view-class="box-border w-full h-full">
                <s-grid-auto-fill-cols
                  v-if="contentGrid"
                  class-name="min-w-[20rem] p-4"
                  col-min-width="18rem"
                  gap="1rem"
                >
                  <slot name="content" />
                </s-grid-auto-fill-cols>
                <div v-else class="box-border w-full h-full">
                  <slot name="content" />
                </div>
              </el-scrollbar>
            </div>
          </el-main>
          <x-layout-side-hidden
            v-if="sideRight"
            :width="`${sideRightWidth + 1}px`"
            v-model="sideRightShow"
          >
            <s-adjustable-container
              :width-adjustable="sideRightWidthAdjustable"
              :width-min="150"
              adjust-width-trigger-position="left"
              @update:width="(width) => (sideRightWidth = width)"
              height-follow-parent
            >
              <el-scrollbar view-class="box-border w-full h-full">
                <slot name="side-right" />
              </el-scrollbar>
            </s-adjustable-container>
          </x-layout-side-hidden>
        </el-container>
      </template>
    </x-layout>
  </s-watch-size>
  <drawer-responsive direction="ltr" :title="sideTitle" v-model="isDrawerShow">
    <slot name="side" />
  </drawer-responsive>
</template>

<style scoped lang="scss"></style>
